<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><b>*</b>店名</td>
                    <td><input type="text" v-model="queryinfo.ShopName"/></td>
                </tr>
                <tr>
                    <td><b>*</b>营业时间</td>
                    <td><input type="date" v-model="queryinfo.CreateTime"/></td>
                </tr>
                <tr>
                    <td><b>*</b>服务范围</td>
                    <td><select v-model="queryinfo.FuwuId">
            <option value="">请选择</option>
            <option :value="item.Id" v-for="item in data.list1">{{ item.FuwuName }}</option>
        </select></td>
                </tr>
                <tr>
                    <td>店主</td>
                    <td><input type="text" v-model="queryinfo.Dianzhu"/></td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td><input type="text" v-model="queryinfo.Phone"/></td>
                </tr>
                <tr>
                    <td>门店介绍</td>
                    <td><textarea v-model="queryinfo.Jieshao"></textarea></td>
                </tr>
                <tr>
                    <td><b>*</b>门店地址</td>
                    <td><input type="text" v-model="queryinfo.Adress"/></td>
                </tr>
                <tr>
                    <td><b>*</b>状态</td>
                    <td>
                        <input type="radio" :value="0" name="state" v-model="queryinfo.State"/>禁用
                        <input type="radio" :value="1" name="state" v-model="queryinfo.State"/>启用
                    </td>
                </tr>
                <tr>
                    <td>门店logo</td>
                    <td>
                        <img :src="queryinfo.Logo" width="100" height="100" alt=""/>
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td><input type="file" @change="img"/>
                        <img :src="queryinfo.Photo" width="100" height="100" alt=""/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="修改" class="btn btn-success" @click="ok"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute}from 'vue-router'
const router=useRouter();
const route=useRoute();

let queryinfo=reactive({
  "ShopName": "",
  "CreateTime": "",
  "FuwuId": '',
  "Dianzhu": "",
  "Phone": "",
  "Jieshao": "",
  "Adress": "",
  "State": '',
  "Logo": "",
  "Photo": "",
})

let data:any=reactive({
    list1:[],
})

onMounted(()=>{
    getbang();
    fantian();
})

const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'/api/Img/Fileimg',
        method:'post',
        data:f
    })
    .then(res=>{
        console.log(res);
        queryinfo.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const fantian=()=>{
    axios({
        url:'/api/Shop/Fantain',
        method:'get',
        params:{id:route.query.id}
    })
    .then(res=>{
        console.log(res);
        Object.assign(queryinfo,res.data);
        queryinfo.CreateTime=queryinfo.CreateTime.substring(0,10);
    })
    .catch(err=>{
        console.log(err);
    })
}

const getbang=()=>{
    axios({
        url:'/api/Shop/Getfuwu',
        method:'get',
    })
    .then(res=>{
        console.log(res);
        data.list1=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const ok=()=>{
    if(queryinfo.ShopName==""){
        alert('店名不能为空');
        return;
    }
    if(queryinfo.CreateTime==""){
        alert('时间不能为空');
        return;
    }
    if(queryinfo.FuwuId.length==0){
        alert('服务范围不能为空');
        return;
    }
    if(queryinfo.Adress==""){
        alert('门店地址不能为空');
        return;
    }
    axios({
        url:'/api/Shop/Updateshop',
        method:'put',
        data:queryinfo
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            router.push('/shoplist');
        }
        else{
            alert('修改失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>
b{
    color: red;
}
</style>